<template>
	<uni-popup ref="vipPopup" type="bottom" :mask-click="true">
		<view class="popup-vip">
			<image class="avatar" :src="picUrl" mode="aspectFill"></image>
			<view class="title">{{title}}</view>
			<view class="btn" @click="toVip">{{btnText}}</view>
		</view>
	</uni-popup>
</template>

<script>
	import RouteUtil from '@/main/common/RouteUtil';
	export default {
		name: "popup-vip",
		data() {
			return {
				picUrl:''
			};
		},
		props: {
			title: {
				type: String,
				default:()=>'解锁聊天'
			},
			btnText:{
				type:String,
				default:()=>'开通会员获得特权'
			}
		},
		methods: {
			toVip() {
				RouteUtil.toVip()
			},
			open(url){
				this.picUrl = url
				this.$refs.vipPopup.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-vip {
		min-height: 500rpx;
		background-color: #282828;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx;

		.avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}

		.title {
			margin-top: 50rpx;
			font-size: 36rpx;
			color: #f6f6f6;
		}

		.btn {
			margin-top: 50rpx;
			font-size: 36rpx;
			color: #f6f6f6;
			background-color: #eaa268;
			border-radius: 50rpx;
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>